<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>公司架构</title>
    <th:block th:include="statics/common/page/header"></th:block>
    <link rel="stylesheet" th:href="@{../statics/css/upload-template.css}"/>
</head>

<body>
<div id="companyArchitecture" v-cloak>
	<Row>
		<i-col span="5">
			<i-button type="info" @click="changeCompany" style="margin-left:20px;" v-if="isAdmin"><i class="fa fa-plus"></i>&nbsp;选择公司</i-button>
			<i-button type="info" @click="getArchitectureTreeList" style="margin-left:20px;" v-if="!isAdmin"><i class="fa fa-plus"></i>&nbsp;刷新结构</i-button>
			<ul id="architectureTree" class="ztree"></ul>
		</i-col>
		<i-col span="19">
			<tabs @on-click="activeTab" value="department">
				<tab-pane :label="tabFirst" name="branch" :disabled="isCompany">
	        		<div v-show="showBranchList">
				        <Row class="search-panel-space">
				            <div class="search-group">
				                <i-col span="5">
				                	<label class="search-label-20">名称:</label>
				                    <i-input v-model="branchQuery.name" @on-enter="queryBranch" placeholder="名称" class="search-item-width-75"/>
				                </i-col>
				                <i-col span="6">
				                	<label class="search-label-20">联系电话:</label>
				                    <i-input v-model="branchQuery.phone" @on-enter="queryBranch" placeholder="联系电话" class="search-item-width-75"/>
				                </i-col>
				                <i-col span="5">
				                	<label class="search-label-20">联系人:</label>
				                    <i-input v-model="branchQuery.attn" @on-enter="queryBranch" placeholder="联系人" class="search-item-width-75"/>
				                </i-col>
				                <i-button @click="queryBranch">查询</i-button>
				                <i-button @click="reloadSearchBranch">重置</i-button>
				            </div>
				        </Row>    
				        <Row :gutter="16">
				            <div class="buttons-group">
				                <i-button type="warning" @click="updateBranch" th:if="${@shiroAuthService.hasPermission('org:companybranch:update')}">
				                	<i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
				                <i-button type="error" @click="delBranch" th:if="${@shiroAuthService.hasPermission('org:companybranch:delete')}">
				                	<i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
				            </div>
				        </Row>
					    <table id="companyBranchGrid"></table>
				    </div>
					
				    <Card v-show="!showBranchList">
				        <p slot="title" style="height: 35px;">{{title}}
				        	<i-button type="warning" @click="reloadBranch" style="margin-left: 8px"/>返回</i-button>
				        </p>
						<i-form ref="formBranchValidate" :model="orgCompanyBranch" :rules="ruleBranchValidate" :label-width="120">
				            <Form-item label="所属公司" prop="companyName" style="width:450px;">{{companyInfo.name}}</Form-item>
				            <Form-item label="上级部门" prop="parentName" style="width:450px;">
				                <i-input v-model="parentDepartment.name" disabled  placeholder="上级部门" icon="eye" @on-click="selectParent('branch')"/>
				            </Form-item>
				            <Form-item label="门店简称" prop="name" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.name" placeholder="门店简称"/>
				            </Form-item>
				            <Form-item label="门店全称" prop="allName" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.allName" placeholder="门店全称"/>
				            </Form-item>
				            <Form-item label="门店编号" prop="serialNo" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.serialNo" placeholder="门店编号"/>
				            </Form-item>
				            <Form-item label="门店地址" prop="address" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.address" placeholder="门店地址"/>
				            </Form-item>
				            <!-- <Form-item label="营业执照" prop="license" style="width: 450px;">
				                <div class="multiple-template-upload-list" v-for="item in uploadLicenseList">
							        <template v-if="item.status === 'finished' ">
							            <img :src="item.url">
							            <div class="multiple-template-upload-list-cover">
							                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
							                <Icon type="ios-trash-outline" @click.native="handleRemove('license')"></Icon>
							            </div>
							        </template>
							        <template v-else>
							        	<i-progress :percent="item.percentage" hide-info></i-progress>
							        </template>
							    </div>
				            
				            	<Upload ref="uploadLicenseref" :show-upload-list="false" :default-file-list="uploadLicenseList" :on-success="handleSuccessLicense"
							        :format="['jpg','jpeg','png']" :max-size="4096" :on-format-error="handleImgFormatError" :on-exceeded-size="handleImgMaxSize"
							        :before-upload="handleLicenseImgBeforeUpload" multiple action="http://upload.qiniu.com" :data="uploadInfo" style="display: inline-block;width:58px;">
							        <div class="multiple-template-upload-list" style="border: darkgrey 1px dashed;">
							        	<Icon type="camera" size="20"></Icon>
							        </div>
							    </Upload>
				            </Form-item> -->
				            <Form-item label="联系人" prop="attn" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.attn" placeholder="联系人"/>
				            </Form-item>
				            <Form-item label="联系人电话" prop="phone" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.phone" placeholder="联系人电话"/>
				            </Form-item>
				            <!-- <Form-item label="法人" prop="legal" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.legal" placeholder="法人"/>
				            </Form-item> -->
				            <!-- <Form-item label="法人身份证正面" prop="idcardPositive" style="width: 450px;">
				                <div class="multiple-template-upload-list" v-for="item in uploadIdcardPositiveList">
							        <template v-if="item.status === 'finished' ">
							            <img :src="item.url">
							            <div class="multiple-template-upload-list-cover">
							                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
							                <Icon type="ios-trash-outline" @click.native="handleRemove('idcardPositive')"></Icon>
							            </div>
							        </template>
							        <template v-else>
							        	<img th:src="@{../statics/img/loading.gif}">
							            <i-progress :percent="item.percentage" hide-info></i-progress>
							        </template>
							    </div>
				            
				            	<Upload ref="uploadIdcardPositiveref" :show-upload-list="false" :default-file-list="uploadIdcardPositiveList" :on-success="handleSuccessIdcardPositive"
							        :format="['jpg','jpeg','png']" :max-size="4096" :on-format-error="handleImgFormatError" :on-exceeded-size="handleImgMaxSize"
							        :before-upload="handleIdcardPositiveImgBeforeUpload" multiple action="http://upload.qiniu.com" :data="uploadInfo" style="display: inline-block;width:58px;">
							        <div class="multiple-template-upload-list" style="border: darkgrey 1px dashed;">
							        	<Icon type="camera" size="20"></Icon>
							        </div>
							    </Upload>
				            </Form-item> -->
				            <!-- <Form-item label="法人身份证反面" prop="idcardReverse" style="width: 450px;">
				                <div class="multiple-template-upload-list" v-for="item in uploadIdcardReverseList">
							        <template v-if="item.status === 'finished' ">
							            <img :src="item.url">
							            <div class="multiple-template-upload-list-cover">
							                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
							                <Icon type="ios-trash-outline" @click.native="handleRemove('idcardReverse')"></Icon>
							            </div>
							        </template>
							        <template v-else>
							        	<img th:src="@{../statics/img/loading.gif}">
							        	<i-progress :percent="item.percentage" hide-info></i-progress>
							        </template>
							    </div>
				            
				            	<Upload ref="uploadIdcardReverseref" :show-upload-list="false" :default-file-list="uploadIdcardReverseList" :on-success="handleSuccessIdcardReverse"
							        :format="['jpg','jpeg','png']" :max-size="4096" :on-format-error="handleImgFormatError" :on-exceeded-size="handleImgMaxSize"
							        :before-upload="handleIdcardReverseImgBeforeUpload" multiple action="http://upload.qiniu.com" :data="uploadInfo" style="display: inline-block;width:58px;">
							        <div class="multiple-template-upload-list" style="border: darkgrey 1px dashed;">
							        	<Icon type="camera" size="20"></Icon>
							        </div>
							    </Upload>
				            </Form-item> -->
				            <Form-item label="门店电话" prop="tel" style="width: 450px;">
				                <i-input v-model="orgCompanyBranch.tel" placeholder="门店电话"/>
				            </Form-item>
				            <Form-item>
				                <i-button type="primary" @click="handleSubmitBranch('formBranchValidate')">提交</i-button>
				                <i-button type="warning" @click="reloadBranch" style="margin-left: 8px"/>返回</i-button>
				                <i-button type="ghost" @click="handleResetBranch('formBranchValidate')" style="margin-left: 8px">重置</i-button>
				            </Form-item>
				        </i-form>
					</Card>
		        </tab-pane>
		        <tab-pane :label="tabSecond" name="department">
		        	<div v-show="showDepartmentList">
				        <Row class="search-panel-space">
				            <div class="search-group">
				                <i-col span="5">
				                	<label class="search-label-20">名称:</label>
				                    <i-input v-model="departmentQuery.name" @on-enter="queryDepartment" placeholder="名称" class="search-item-width-75"/>
				                </i-col>
				                <i-button @click="queryDepartment">查询</i-button>
				                <i-button @click="reloadSearchDepartmentInfo">重置</i-button>
				            </div>
				        </Row>    
				        <Row :gutter="16">
				            <div class="buttons-group">
				                <i-button type="info" @click="addDepartment" th:if="${@shiroAuthService.hasPermission('org:department:save')}">
				                	<i class="fa fa-plus"></i>&nbsp;新增</i-button>
				                <i-button type="warning" @click="updateDepartment" th:if="${@shiroAuthService.hasPermission('org:department:update')}">
				                	<i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
				                <i-button type="error" @click="delDepartment" th:if="${@shiroAuthService.hasPermission('org:department:delete')}">
				                	<i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
				            </div>
				        </Row>
					    <table id="departmentInfoGrid"></table>
				    </div>
		        	<Card v-show="!showDepartmentList">
				        <p slot="title" style="height: 35px;">{{title}}
				        	<i-button type="warning" @click="reloadDepartmentInfo" style="margin-left: 8px"/>返回</i-button>
				        </p>
						<i-form ref="formDepartmentValidate" :model="orgDepartment" :rules="ruleDepartmentInfoValidate" :label-width="80">
				            <Form-item label="所属公司" prop="companyName" style="width:450px;">
				            	{{companyInfo.name}}
				            </Form-item>
				            <Form-item label="上级部门" prop="parentName" style="width:450px;">
				                <i-input v-model="parentDepartment.name" disabled  placeholder="上级部门" icon="eye" @on-click="selectParent('department')"/>
				            </Form-item>
				            <Form-item label="部门名称" prop="name" style="width:450px;">
				                <i-input v-model="orgDepartment.name" placeholder="部门名称"/>
				            </Form-item>
				            <Form-item label="部门编号" prop="serialNo" style="width: 450px;">
					            <i-input v-model="orgDepartment.serialNo" placeholder="部门编号"/>
					        </Form-item>
					        <Form-item label="类型" prop="type" style="width:450px;">
				                <Radio-group v-model="orgDepartment.type" v-for="departType in departTypeList">
				                    <Radio :label="departType.val">
				                        <span>{{departType.content}}</span>
				                    </Radio>
				                </Radio-group>
				            </Form-item>
				            <Form-item label="部门描述" prop="content" style="width:450px;">
				                <i-input v-model="orgDepartment.content" placeholder="部门描述" 
				                type="textarea" :autosize="{minRows:3,maxRows:7}"/>
				            </Form-item>
				            <Form-item>
				                <i-button type="primary" @click="handleDepartmentSubmit('formDepartmentValidate')">提交</i-button>
				                <i-button type="warning" @click="reloadDepartmentInfo" style="margin-left: 8px"/>返回</i-button>
				                <i-button type="ghost" @click="handleDepartmentReset('formDepartmentValidate')" style="margin-left: 8px">重置</i-button>
				            </Form-item>
				        </i-form>
					</Card>
		        </tab-pane>
		        <tab-pane :label="tabThird" name="employee">
	        		<div v-show="showEmployeeList">
				        <Row class="search-panel-space">
				            <div class="search-group">
				                <i-col span="5">
				                	<label class="search-label-20">姓名:</label>
				                    <i-input v-model="employeeQuery.name" @on-enter="queryEmployeeInfo" placeholder="名称" class="search-item-width-75"/>
				                </i-col>
				                <i-col span="5">
				                	<label class="search-label-20">手机号:</label>
				                    <i-input v-model="employeeQuery.phone" @on-enter="queryEmployeeInfo" placeholder="手机号" class="search-item-width-75"/>
				                </i-col>
				                <i-col span="5">
				                	<label class="search-label-20">职位:</label>
				                    <i-input v-model="employeeQuery.position" @on-enter="queryEmployeeInfo" placeholder="职位" class="search-item-width-75"/>
				                </i-col>
				                <i-button @click="queryEmployeeInfo">查询</i-button>
				                <!-- <i-button @click="queryEmployeeInfoAll">全部</i-button> -->
				                <i-button @click="reloadSearchEmployeeInfo">重置</i-button>
				            </div>
				        </Row>    
				        <Row :gutter="16">
				            <div class="buttons-group">
				                <i-button type="info" @click="addEmployee" th:if="${@shiroAuthService.hasPermission('org:employeeInfo:save')}">
				                	<i class="fa fa-plus"></i>&nbsp;新增</i-button>
				                <i-button type="warning" @click="updateEmployee" th:if="${@shiroAuthService.hasPermission('org:employeeInfo:update')}">
				                	<i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
				                <i-button type="warning" @click="updateEmployeePassword" th:if="${@shiroAuthService.hasPermission('org:employeeInfo:updatePassword')}">
				                	<i class="fa fa-pencil-square-o"></i>&nbsp;修改密码</i-button>
				                <i-button type="error" @click="delEmployee" th:if="${@shiroAuthService.hasPermission('org:employeeInfo:delete')}">
				                	<i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
				            </div>
				        </Row>
					    <table id="employeeInfoGrid"></table>
				    </div>
				
				    <Card v-show="!showEmployeeList">
				        <p slot="title" style="height: 35px;">{{title}}
				        	<i-button type="warning" @click="reloadSearchEmployeeInfo" style="margin-left: 8px"/>返回</i-button>
				        </p>
						<i-form ref="formEmployeeValidate" :model="employeeInfo" :rules="ruleEmployeeValidate" :label-width="80">
							<Form-item label="所属公司" prop="companyName" style="width:450px;">
				            	{{companyInfo.name}}
				            </Form-item>
				            <Form-item label="上级部门" prop="parentName" style="width:450px;">
				            	<i-input v-model="parentDepartment.name" disabled  placeholder="上级部门" icon="eye" @on-click="selectParent('employee')"/>
				            </Form-item>
				            <Form-item label="姓名" prop="name" style="width:450px">
				                <i-input v-model="employeeInfo.name" placeholder="姓名"/>
				            </Form-item>
				            <Form-item label="人员编号" prop="serialNo" style="width: 450px;">
				                <i-input v-model="employeeInfo.serialNo" placeholder="人员编号"/>
				            </Form-item>
				            <Form-item label="手机号" prop="phone" style="width:450px">
				                <i-input v-model="employeeInfo.phone" placeholder="手机号" search/>
				            </Form-item>
				            <Form-item label="手机验证码" prop="phonecode" style="width:450px" v-show="showPhoneCode">
				                <i-input v-model="employeeInfo.phonecode" placeholder="手机验证码">
				                	<span slot="append"><i-button type="primary" @click="sendPhoneCode">发送验证码</i-button></span>
				                </i-input>
				            </Form-item>
				            <Form-item label="职位" prop="position" style="width:450px">
				                <!-- <i-input v-model="employeeInfo.position" placeholder="职位"/> -->
				                <i-input type="text" v-model="employeeInfo.positionName" icon="eye" readonly="readonly"
                         @on-click="selectCompanyPosition" placeholder="职位"/>
				            </Form-item>
				            <Form-item label="职能描述" prop="positionContent" style="width:450px">
				                <!-- <i-input v-model="employeeInfo.position" placeholder="职位"/> -->
				                	职能：{{employeeInfo.positionContent}} 
				            </Form-item>
				            <Form-item label="是否主管" prop="director" style="width:450px">
				                <Radio-group v-model="employeeInfo.director">
				                    <Radio label="0">
				                        <span>否</span>
				                    </Radio>
				                    <Radio label="1">
				                        <span>是</span>
				                    </Radio>
				                </Radio-group>
				            </Form-item>
				            <Form-item label="角色" prop="roleList" style="width:450px">
				                <!-- <i-input v-model="employeeInfo.roleList" placeholder=""/> -->
				                <Checkbox-group v-model="employeeInfo.roleList">
				                    <Checkbox :label="role.id" v-for="role in roleList">{{role.roleName}}</Checkbox>
				                </Checkbox-group>
				            </Form-item>
				            <Form-item>
				                <i-button type="primary" @click="handleEmployeeSubmit('formEmployeeValidate')">提交</i-button>
				                <i-button type="warning" @click="reloadSearchEmployeeInfo" style="margin-left: 8px"/>返回</i-button>
				                <i-button type="ghost" @click="handleEmployeeReset('formEmployeeValidate')" style="margin-left: 8px">重置</i-button>
				            </Form-item>
				        </i-form>
					</Card>
		        </tab-pane>
		    </tabs>
		</i-col>
	</Row>
	<div id="employeePasswordLayer" style="display: none;">
        <form class="form-horizontal" style="width: 350px;">
            <div class="form-group">
                <div class="form-group">
                    <div class="col-sm-2 control-label">姓名</div>
                    <span class="label label-success" style="vertical-align: bottom;">{{employeeData.name}}</span>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">手机号</div>
                    <span class="label label-success" style="vertical-align: bottom;">{{employeeData.phone}}</span>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">新密码</div>
                    <div class="col-sm-10">
                        <i-input v-model="employeeData.newPassword" placeholder="新密码"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="orgCompanyArchitectureLayer" style="display: none;padding:10px;">
	<ul id="architectureChangeTree" class="ztree"></ul>
</div>
<script th:src="@{../statics/js/org/companyarchitecture.js}"></script>
</body>
</html>